<template>
  <div class="companyDetail">
    <div id="top">
      <div
        class="img"
        :style="{
          'background-image': 'url(' + topxian + ')',
          'background-color': '#fff'
        }"
      ></div>
      <div class="qiye"></div>
      <div class="wenz">
        <div class="wenTB">
          <van-icon @click="down" name="down" class="down" />
        </div>
        <div class="name">
          <div class="left">
            <h3>{{ data.name }}</h3>
            <div>
              <span>{{ data.type }}</span>
              <span>{{ data.step }}</span>
              <span>{{ data.scale }}</span>
            </div>
          </div>
          <div class="right">
            <img :src="baseURL + data.logo" alt="" />
          </div>
        </div>
        <div class="time">
          <span class="iconfont iconicon_gongsi_time"></span>
          <span>{{ data.workTime }}</span>
          <span class="iconfont iconicon_gongsi_sx"></span>
          <span>{{ data.restDay }}</span>
          <span class="iconfont iconicon_gongsi_jiaban"></span>
          <span>{{ data.overtime }}</span>
        </div>
        <div class="scroll">
          <div class="scroll-box" :style="{ width: this.brr }">
            <div v-for="(item, index) in this.weals" :key="index">
              <span
                ><i class="iconfont" :class="item.icon"></i
                >{{ item.text }}</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <!-- 公司地址 -->
      <div class="site">
        <van-cell title="公司地址" is-link>
          <template #default>
            <span @click="qSite">全部地址</span>
          </template>
        </van-cell>
        <div class="site_s">
          <div class="left">
            <p>{{ data.address }}</p>
            <p>距离当前50m,步行需要57秒</p>
          </div>
          <div class="right">
            <span @click="daohan"
              ><i class="iconfont iconicon_gongsi_daohang"></i>导航</span
            >
          </div>
        </div>
      </div>
      <!-- 公司简介 -->
      <div class="synopsis">
        <p>公司简介</p>
        <div :class="{ syn_zhe: isShow }">
          <div v-html="data.desc"></div>
        </div>
        <div class="zhang">
          <span @click="zhan" v-if="zhang"
            >展开<van-icon name="arrow-down"
          /></span>
          <span @click="sou" v-else>收起<van-icon name="arrow-up"/></span>
        </div>
      </div>
      <!-- 公司照片 -->
      <div class="pic">
        <p>公司照片</p>
        <div class="pid_i">
          <div class="pic_p" :style="{ width: this.arr }">
            <div
              v-for="(item, index) in this.tupian"
              :key="index"
              @click="img(index)"
            >
              <img :src="baseURL + item" alt="" />
            </div>
          </div>
        </div>
      </div>
      <!-- 工商信息 -->
      <div class="information">
        <p>工商信息</p>
        <div>
          <span class="title">公司全称</span>
          <span>{{ data.fullname }}</span>
        </div>
        <div>
          <span class="title">成立时间</span>
          <span>{{ data.establishedTime }}</span>
        </div>
        <div>
          <span class="title">注册资本</span>
          <span>{{ data.capital }}</span>
        </div>
        <div>
          <span class="title">法人代表</span>
          <span>{{ data.legalPerson }}</span>
        </div>
        <div>
          <span class="title">信息来源</span>
          <span>{{ data.messageSource }}</span>
        </div>
      </div>
      <!-- 面试评论 -->
      <div class="comment">
        <div class="top">
          <div class="top_t">
            <span class="one">面试评价</span>
            <span class="two" @click="write">写评论</span>
          </div>
          <div class="top_o">
            <div class="left">
              <div class="conent">
                <div class="to">
                  <span>{{ data.interviewerScore }}</span
                  >分
                </div>
                <div class="bo">
                  <van-rate
                    v-model="value"
                    :size="20"
                    color="#ffd21e"
                    void-icon="star"
                    void-color="#eee"
                    :readonly="true"
                  />
                </div>
              </div>
            </div>
            <div class="right">
              <div class="conent">
                <div class="item">
                  <span>岗位描述</span>
                  <span>
                    <van-rate
                      v-model="gan"
                      :size="16"
                      color="#ffd21e"
                      void-icon="star"
                      void-color="#eee"
                      :readonly="true"
                    />
                  </span>
                </div>
                <div class="item">
                  <span>面试情况</span>
                  <span>
                    <van-rate
                      v-model="qing"
                      :size="16"
                      color="#ffd21e"
                      void-icon="star"
                      void-color="#eee"
                      :readonly="true"
                    />
                  </span>
                </div>
                <div class="item">
                  <span>面试官</span>
                  <span>
                    <van-rate
                      v-model="guan"
                      :size="16"
                      color="#ffd21e"
                      void-icon="star"
                      void-color="#eee"
                      :readonly="true"
                    />
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div class="box" v-for="(item, index) in comment" :key="index">
              <div class="top">
                <div class="left">
                  <img :src="baseURL + item.user.avatar" alt="" />
                </div>
                <div class="right">
                  <div class="ri_title">{{ item.user.nickname }}</div>
                  <div class="one">
                    面试岗位:<span>{{ item.position }}</span>
                  </div>
                  <div class="two" v-if="item.tags && item.tags.length > 0">
                    <span v-for="(t, i) in item.tags" :key="i">{{ t }}</span>
                  </div>
                </div>
                <div class="pinfen">
                  <van-rate
                    v-model="item.positionScore"
                    :size="16"
                    color="#ffd21e"
                    void-icon="star"
                    void-color="#eee"
                    :readonly="true"
                  />
                </div>
              </div>
              <div class="bo_co">{{ item.content }}</div>
              <div class="time">{{ item.created_at | formatTime }}</div>
            </div>
          </van-list>
        </div>
      </div>
    </div>
    <div class="box_bo">
      <div class="left" @click="companyPosition">
        <span
          >在招职位<i>{{ this.total }}</i></span
        >
      </div>
      <div class="right" @click="gointerview">
        <span>企业面试题<i>23</i></span>
      </div>
    </div>
    <!-- 添加评论 -->
    <van-popup v-model="show" style="width : 80% , height : 455px">
      <div class="box">
        <p>请根据实际情况为企业打分</p>
        <div class="conent">
          <div class="item">
            <span>岗位描述</span>
            <span>
              <van-rate
                v-model="pin_gan"
                :size="16"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />
            </span>
          </div>
          <div class="item">
            <span>面试情况</span>
            <span>
              <van-rate
                v-model="pin_qing"
                :size="16"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />
            </span>
          </div>
          <div class="item">
            <span>面试官</span>
            <span>
              <van-rate
                v-model="pin_guan"
                :size="16"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />
            </span>
          </div>
        </div>
        <div class="position" @click="Position">
          <span>职位选择</span>
          <span>{{ position }}</span>
        </div>
        <div class="text">
          <textarea v-model="text_value"></textarea>
        </div>
        <div class="affirm">
          <div class="left" @click="qvxiao"><span>取消</span></div>
          <div class="right" @click="tijiao"><span>提交</span></div>
        </div>
      </div>
    </van-popup>
    <!-- 选择职位 -->
    <van-popup v-model="zhiwei" position="bottom" :style="{ height: '40%' }">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
  </div>
</template>

<script>
import {
  companyDetail,
  companyComments,
  addComment,
  companyPositions
} from '@/api/api.js'
import { ImagePreview } from 'vant'
import { getLocal } from '@/utils/local.js'
export default {
  data () {
    return {
      baseURL: process.env.VUE_APP_URL,
      id: this.$route.params.id,
      value: 0,
      gan: 0,
      qing: 0,
      guan: 0,
      // 企业详情
      data: '',
      // 保险
      weals: [],
      // 大评分
      score: 0,
      // 图片
      tupian: [],
      // 图片盒子宽度
      arr: '',
      // 公司标签宽度
      brr: '',
      // 模糊图
      topxian: '',
      // 评论心心
      con_pin: 4,
      // 评论参数
      start: 0,
      limit: 5,
      // 评论数组
      comment: [],
      loading: false,
      finished: false,
      // 添加评论
      show: false,
      // 企业简介遮罩
      isShow: true,
      zhang: true,
      // 评论的小星星
      pin_gan: 5,
      pin_qing: 5,
      pin_guan: 5,
      // 选择的职位
      position: '点击选择面试的职位',
      // 更改职位存储
      position_t: 0,
      // 选择职位弹出框
      zhiwei: false,
      // 职位
      columns: [],
      // 职位id
      columnsID: [],
      // 文本
      text_value: '',
      // 职位id
      co_id: 0,
      // 职业个数
      total: 0,
      // 点击图片
      // 预览图片
      arry: []
    }
  },
  methods: {
    // 跳到上一页
    down () {
      this.$router.go(-1)
    },
    // 点击换地址
    qSite () {
      this.$toast('只有一个地址哦')
    },
    // 点击导航
    daohan () {
      this.$toast('敬请期待')
    },
    // 获取企业详情
    async allCompany () {
      const res = await companyDetail(this.id)
      this.data = res.data
      this.weals = res.data.weals
      this.value = parseInt(res.data.interviewerScore)
      this.gan = parseInt(res.data.score.positionScore)
      this.qing = parseInt(res.data.score.interviewScore)
      this.guan = parseInt(res.data.score.interviewerScore)
      // 图片
      this.tupian = res.data.sliders
      this.arr = 140 * res.data.sliders.length + 'px'
      // 公司福利
      this.brr = 100 * res.data.weals.length + 'px'
      // 头部模糊图
      this.topxian = this.baseURL + res.data.logo
    },
    // 获取评论companyComments
    async onLoad () {
      const res = await companyComments({
        id: this.id,
        start: this.start,
        limit: this.limit
      })
      this.comment = [...this.comment, ...res.data.list]
      this.start = this.start + this.limit
      this.loading = false
      if (res.data.list.length === 0) {
        this.finished = true
      }
    },
    // 写评论
    write () {
      if (!getLocal('heimamm_mobile_token')) {
        this.$toast.fail('请先登入，嘤嘤嘤')
        this.$router.push('/checklogin')
      }
      this.show = true
    },
    // 点击展开
    zhan () {
      this.isShow = false
      this.zhang = false
    },
    // 点击收起
    sou () {
      this.isShow = true
      this.zhang = true
    },
    // 点击取消
    qvxiao () {
      this.show = false
    },
    // 点击提交
    async tijiao () {
      if (this.position_t === 0) {
        this.$toast('请选择职位')
      } else {
        this.show = false
        const res = await addComment({
          content: this.text_value,
          interviewScore: this.pin_qing,
          interviewerScore: this.pin_guan,
          positionScore: this.pin_gan,
          position: this.co_id
        })
        this.loading = false
        this.finished = false
        this.comment.unshift(res.data)
      }
    },
    // 跳转到答题页面
    gointerview () {
      this.$router.push({ path: '/interview', query: { company: this.id } })
    },
    // 跳到在招职位
    companyPosition () {
      this.$router.push(`/companyPosition/${this.id}`)
    },
    Position () {
      this.zhiwei = true
    },
    // 点击职位选择确定键
    onConfirm (value, index) {
      this.zhiwei = false
      this.position = value
      this.co_id = this.columnsID[index]
    },
    onCancel () {
      this.zhiwei = false
    },
    // 获取企业所有岗位
    async companyPositions () {
      const res = await companyPositions({
        id: this.id,
        limit: 99999999
      })
      res.data.list.forEach(item => {
        return (this.columns = [...this.columns, item.name])
      })
      res.data.list.forEach(item => {
        return (this.columnsID = [...this.columnsID, item.id])
      })
      this.total = res.data.total
    },
    // 点击图片
    img (index) {
      this.arry = []
      this.tupian.forEach(item => {
        this.arry.push(this.baseURL + item)
      })
      ImagePreview({
        images: this.arry,
        startPosition: index
      })
    }
  },
  created () {
    this.allCompany()
    this.companyPositions()
    // 监听
    this.$watch('position', function (newValue, oldValue) {
      this.position_t = 1
    })
  },
  components: {
    [ImagePreview.Component.name]: ImagePreview.Component
  }
}
</script>

<style lang="less">
.companyDetail {
  #top {
    z-index: 1;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    .img {
      width: 100%;
      height: 6.66667rem;
      background-size: 100%, 8rem;
      filter: blur(0.15333rem);
      position: absolute;
      left: 0;
      top: 0;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .qiye {
      width: 100%;
      height: 250px;
      opacity: 0.8;
      filter: blur(5px);
      background-color: #181a39;
      color: #fff;
      .down {
        color: #fff;
      }
    }
    .wenz {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 250px;
      color: #fff;
      .wenTB {
        margin-top: 20px;
        margin-left: 10px;
        .down {
          transform: rotate(90deg);
        }
      }
      .name {
        padding: 0 10px;
        display: flex;
        margin-top: 20px;
        height: 80px;
        .left {
          height: 80px;
          flex: 1;
          h3 {
            line-height: 40px;
            margin: 0;
            padding: 0 5px;
            font-size: 20px;
          }
          span {
            margin-right: 5px;
            line-height: 40px;
            font-size: 14px;
            padding: 1px 5px;
            border-radius: 5px;
            border: 1px #fff solid;
          }
        }
        .right {
          width: 80px;
          height: 80px;
          img {
            width: 100%;
            height: 100%;
            border-radius: 10px;
          }
        }
      }
      .time {
        padding: 0 10px;
        span {
          font-size: 12px;
          &:nth-child(1n) {
            margin-right: 2px;
          }
          &:nth-child(2n) {
            margin-right: 5px;
          }
        }
      }
      .scroll {
        overflow-x: scroll;
        &::-webkit-scrollbar {
          display: none;
        }
      }
      .scroll-box {
        margin-top: 20px;
        margin-left: 10px;
        display: flex;
        div {
          width: 100px;
          height: 40px;
          font-size: 16px;
          text-align: center;
          border: 1px solid #fff;
          margin-right: 5px;
          border-radius: 8px;
          span {
            line-height: 40px;
          }
        }
      }
    }
  }
  .bottom {
    margin-top: 250px;
    margin-bottom: 50px;
    width: 100%;
    padding: 0 10px;
    // 地址
    .site {
      padding-top: 20px;
      .van-cell--clickable {
        padding: 0;
      }
      .van-cell__title {
        span {
          font-size: 20px;
        }
      }
      .site_s {
        width: 100%;
        display: flex;
        .left {
          flex: 1;
          p {
            font-size: 16px;
            font-weight: 700;
            &:last-child {
              font-size: 14px;
              color: #ccc;
            }
          }
        }
        .right {
          width: 100px;
          position: relative;
          span {
            line-height: 44px;
            text-align: center;
            width: 70px;
            font-size: 14px;
            height: 44px;
            border: 1px solid #ccc;
            border-radius: 22px;
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
          }
        }
      }
    }
    //  简介
    .synopsis {
      p {
        font-size: 18px;
      }
      div {
        font-size: 16px;
      }
      .syn_zhe {
        height: 130px;
        overflow: hidden;
      }
      .zhang {
        padding-top: 10px;
        font-size: 18px;
        text-align: center;
      }
    }
    // 图片
    .pic {
      width: 100%;
      p {
        font-size: 18px;
      }
      .pid_i {
        overflow-x: scroll;
        &::-webkit-scrollbar {
          display: none;
        }
        .pic_p {
          display: flex;
          div {
            margin-right: 10px;
            width: 140px;
            height: 80px;
            img {
              border-radius: 10px;
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
    // 工商信息
    .information {
      margin-top: 30px;
      p {
        margin: 0;
        font-size: 18px;
      }
      div {
        margin-top: 10px;
        span {
          font-size: 14px;
        }
        .title {
          color: #ccc;
          margin-right: 20px;
        }
      }
    }
    // 面试评论
    .comment {
      margin-top: 30px;
      .top_t {
        overflow: hidden;
        .one {
          float: left;
          font-size: 18px;
        }
        .two {
          font-size: 18px;
          float: right;
        }
      }
      .top_o {
        padding: 15px 0;
        border-radius: 15px;
        display: flex;
        margin: 0 auto;
        margin-top: 30px;
        width: 330px;
        height: 110px;
        background-color: #f7f7f7;
        .left {
          flex: 4;
          height: 100%;
          position: relative;
          border-right: 1px solid #ccc;
          .conent {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            .to {
              text-align: center;
              font-size: 16px;
              span {
                color: skyblue;
                font-size: 32px;
              }
            }
            .bo {
              text-align: center;
            }
          }
        }
        .right {
          position: relative;
          flex: 6;
          height: 100%;
          .conent {
            width: 100%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            .item {
              margin-bottom: 5px;
              padding: 0 10px;
              overflow: hidden;
              span {
                font-size: 16px;
                float: left;
                &:last-child {
                  float: right;
                }
              }
            }
          }
        }
      }
      .bottom {
        margin-top: 30px;
        .top {
          display: flex;
          .left {
            width: 34px;
            height: 34px;
            margin-right: 5px;
            img {
              border-radius: 17px;
              width: 100%;
              height: 100%;
            }
          }
          .right {
            flex: 1;
            div {
              color: #b4b4bd;
              font-size: 14px;
            }
            .ri_title {
              color: #000;
              font-size: 16px;
              font-weight: 700;
            }
            .two {
              margin-top: 8px;
              span {
                padding: 2px 5px;
                border-radius: 5px;
                margin-right: 8px;
                background-color: #f7f4f5;
              }
            }
          }
        }
      }
      .bo_co {
        margin-top: 10px;
        margin-left: 35px;
        font-size: 18px;
      }
      .time {
        margin-left: 35px;
        margin-top: 10px;
        color: #b4b4bd;
        font-size: 14px;
      }
    }
    .box {
      margin-bottom: 10px;
    }
  }
  .box_bo {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    display: flex;
    text-align: center;
    padding: 10px;
    background-color: #fff;
    .right,
    .left {
      border-radius: 10px;
      flex: 1;
      border: 1px solid #000;
      span {
        position: relative;
        line-height: 30px;
        font-size: 18px;
      }
      i {
        position: absolute;
        top: -50%;
        right: -15px;
        font-size: 12px;
      }
    }
    .left {
      margin-right: 10px;
    }
  }
  .van-popup--center {
    width: 80%;
    height: 455px;
    border-radius: 10px;
    .box {
      width: 100%;
      height: 100%;
      padding: 20px;
      p {
        text-align: center;
        font-size: 20px;
      }
      .conent {
        padding: 0 20px;
        .item {
          margin-top: 5px;
          display: flex;
          justify-content: space-between;
          span {
            font-size: 16px;
          }
        }
      }
      .position {
        height: 50px;
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
        span {
          line-height: 50px;
          font-size: 16px;
          &:last-child {
            color: #969799;
          }
        }
      }
      .text {
        margin-top: 10px;
        width: 100%;
        height: 150px;
        textarea {
          resize: none;
          font-size: 16px;
          padding: 10px;
          width: 100%;
          height: 150px;
          border: 0;
          background-color: #ccc;
          border-radius: 10px;
        }
      }
      .affirm {
        margin-top: 50px;
        display: flex;
        .left,
        .right {
          height: 30px;
          flex: 1;
          text-align: center;
          span {
            line-height: 30px;
            font-size: 16px;
          }
        }
        .left {
          border-right: 1px solid #ccc;
        }
      }
    }
  }
}
</style>
